<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #d3d3d3;
        }
    </style>
</head>
<body>
    <canvas id="thermo-diagram" width="400" height="550"></canvas>
    <script>
        const canvas = document.getElementById('thermo-diagram');
        const ctx = canvas.getContext('2d');

        // Set common styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.textAlign = 'center'; // Set text alignment for easier positioning

        // Define geometry parameters
        const centerX = canvas.width / 2;
        const pistonWidth = 100;
        const pistonHeight = 20;
        const cylinderHeight = 300;
        const pistonX = centerX - pistonWidth / 2;
        const pistonY = 100;

        // 1. Draw the piston
        ctx.strokeRect(pistonX, pistonY, pistonWidth, pistonHeight);
        
        // Draw hatching for the piston
        ctx.save();
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        const hatchSpacing = 10;
        for (let i = -pistonHeight; i < pistonWidth; i += hatchSpacing) {
            ctx.moveTo(pistonX + i, pistonY);
            ctx.lineTo(pistonX + i + pistonHeight, pistonY + pistonHeight);
        }
        ctx.stroke();
        ctx.restore();

        // 2. Draw the cylinder walls (below the piston)
        const cylinderTopY = pistonY + pistonHeight;
        const cylinderBottomY = cylinderTopY + cylinderHeight;
        ctx.beginPath();
        ctx.moveTo(pistonX, cylinderTopY);
        ctx.lineTo(pistonX, cylinderBottomY); // Left wall
        ctx.moveTo(pistonX + pistonWidth, cylinderTopY);
        ctx.lineTo(pistonX + pistonWidth, cylinderBottomY); // Right wall
        ctx.stroke();

        // 3. Draw the arrow
        const arrowEndX = pistonX + 10;
        const arrowEndY = pistonY;
        const arrowStartX = arrowEndX - 35;
        const arrowStartY = arrowEndY - 50;
        ctx.beginPath();
        ctx.moveTo(arrowStartX, arrowStartY);
        ctx.lineTo(arrowEndX, arrowEndY);
        // Arrowhead
        const angle = Math.atan2(arrowEndY - arrowStartY, arrowEndX - arrowStartX);
        const headLength = 12;
        ctx.lineTo(arrowEndX - headLength * Math.cos(angle - Math.PI / 6), arrowEndY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(arrowEndX, arrowEndY);
        ctx.lineTo(arrowEndX - headLength * Math.cos(angle + Math.PI / 6), arrowEndY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
        
        // 4. Add text labels
        // Use a font that supports Chinese characters, with fallbacks
        const chineseFont = '30px "KaiTi", "STKaiti", "SimSun", sans-serif';

        // "注入水银" (Inject mercury)
        ctx.font = '24px "KaiTi", "STKaiti", "SimSun", sans-serif';
        ctx.fillText('注入水银', pistonX + 20, arrowStartY - 10);

        // "活塞" (Piston)
        ctx.fillText('活塞', pistonX + pistonWidth + 35, pistonY + pistonHeight / 2 + 8);

        // "空气柱" (Air column) - vertical text
        ctx.font = chineseFont;
        const verticalTextX = pistonX + 30;
        ctx.fillText('空', verticalTextX, cylinderTopY + 80);
        ctx.fillText('气', verticalTextX, cylinderTopY + 130);
        ctx.fillText('柱', verticalTextX, cylinderTopY + 180);

        // "热图 1.15.1" (Thermo diagram 1.15.1)
        ctx.font = '24px "KaiTi", "STKaiti", "SimSun", sans-serif';
        ctx.fillText('热图 1.15.1', centerX, cylinderBottomY + 50);

    </script>
</body>
</html>